<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>详情</title>
    <link href="../../../static/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/echarts.min.js"></script>
    <script type="text/javascript" src="../../../static/js/dateRange.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../static/css/dateRange.css"/>
    <link rel="stylesheet" href="../../../static/css/jquery.mCustomScrollbar.css">
    <link href="../../../static/css/set-meal.css" type="text/css" media="screen" rel="stylesheet"/>
    <script type="text/javascript" src="../../../static/js/slimscroll.min.js"></script>

    <!--[if lt IE 9]>

	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

	<![endif]-->
    <style type="text/css">
        body.dashboard {
            background-color: #FBFBFB;
            font-family: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
        }

        a {
            color: #606266;
            display: block;
            text-decoration: none !important;
        }

        a:hover,
        a:focus {
            color: #606266;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
        }

        hr {
            border-top: 1px solid #d8d8d8;
        }

        .fs12 {
            font-size: 12px;
        }

        .fs14 {
            font-size: 14px;
        }

        .fs16 {
            font-size: 16px;
        }

        .fs24 {
            font-size: 18px;
        }

        .fs18 {
            font-size: 18px;
        }

        .fw700 {
            font-weight: 700;
        }

        .c3 {
            color: #606266;
        }

        .c4d {
            color: #4d4d4d;
        }

        .c9 {
            color: #999;
        }

        .user-color {
            color: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 29px;
            float: right;
        }

        .c80 {
            color: #808080;
        }

        .c926fab {
            color: #926fab;
        }

        .cbe {
            color: #bebebe;
        }

        .c4a90e2 {
            color: #4a90e2;
        }

        .mt10 {
            margin-top: 10px;
        }

        .mt50 {
            margin-top: 50px;
        }

        .mt320 {
            margin-top: 30px;
        }

        .mt30 {
            margin-top: 20px;
        }

        .body-warp {
            width: 100%;
        }

        .body-content {
            width: 58%;
            margin: 75px auto 10px;
            border: 1px solid #d8d8d8;
            border-radius: 10px;
            background-color: #fff;
            min-width: 980px;
        }

        .mian-width {
            width: 58%;
            margin: 0 auto;
            min-width: 980px;
        }

        .first-page {
            width: 94%;
            margin: 0 auto;
            overflow: hidden;
            padding: 4% 0;
        }

        .first-page-left {
            float: left;
            width: 30%;
            border: 1px solid #d8d8d8;
            text-align: center;
            padding: 20px 0;
            border-radius: 10px;
        }

        .first-page-left img {
            width: 90%;
        }

        .first-page-right {
            float: right;
            width: 60%;
            /*margin-left: 60px;*/
        }

        .left-img-content {
            width: 90%;
            margin: 15px auto;
            text-align: left;
        }

        .first-page-right-top {
            width: 100%;
        }

        .left-company {
            width: 90%;
            float: left;
        }

        .company-logo {
            float: left;
            border-radius: 50%;
        }

        .company-logo img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 1px solid #d8d8d8;
            -moz-box-shadow: 2px 2px 13px #919191;
            -webkit-box-shadow: 2px 2px 13px #919191;
            box-shadow: 2px 2px 13px #919191;
        }

        .company-name {
            width: 80%;
            float: left;
            margin-left: 3%;
        }

        .company-collect {
            width: 30px;
            height: 30px;
            cursor: pointer;
            float: right;
            margin-top: -10%;
        }

        .heat-width {
            display: inline-block;
            width: 124px;
        }

        .main-time,
        .main-count,
        .circle-data {
            width: 100%;
        }

        .main-count-li {
            width: 70%;
            overflow: hidden;
        }

        .main-count-li li {
            width: 50%;
            float: left;
            line-height: 30px;
        }

        .circle-data {
            overflow: hidden;
        }

        .circle {
            float: left;
            width: 50%;
        }

        .graph-data {
            width: 94%;
            margin: 0 auto;
        }

        .tendency {
            width: 100%;
            /*padding-bottom: 20px;*/
            overflow: hidden;
        }

        .w45 {
            width: 45%;
        }

        .fl-left {
            float: left;
        }

        .fl-right {
            float: right;
        }

        .tendency-img-left {
            width: 100%;
            height: 300px;
            border: 1px solid #D8D8D8;
            border-radius: 5px;
        }

        .tendency-title {
            margin-bottom: 10px;
        }

        .index-button {
            width: 100%;
            overflow: hidden;
        }

        .index-button-a {
            width: 110px;
            text-align: center;
            border: 1px solid #4a90e2;
            border-radius: 5px;
            padding: 2px 10px;
            cursor: pointer;
            float: left;
        }

        .index-button-a a {
            display: inline-block;
            color: #4a90e2;
        }

        a.examine-a {
            cursor: pointer;
            color: #4a90e2;
            display: inline;
            margin-left: 5px;
        }

        a.examine-a:hover,
        a.examine-a:focus {
            color: #4a90e2;
        }

        .clear {
            clear: both;
        }

        .ml10 {
            margin-left: 10px;
        }

        .mt05 {
            margin-top: 5%;
        }

        .mb05 {
            margin-bottom: 5%;
        }

        .mt2 {
            margin-top: 5%;
        }

        .navbar-brand {
            padding: 7px 0;
        }

        .single-page {
            position: absolute;
            width: 315px;
            padding: 15px 15px 0 15px;
            margin: 10px 10px 10px 0;
            border: 1px solid #d4d4d4;
            background-color: #fff;
            border-radius: 5px;
        }

        /*弹窗*/
        #more-btn img, #more-btn span {
            cursor: pointer;
        }

        .more-show-box {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 99999999999;
            background: rgba(0, 0, 0, 0.76);
            display: none;
        }

        .more-show {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 927px;
            height: 551px;
        }

        .more-show-detail {
            float: left;
            width: 874px;
            height: 100%;
            background: #fff;
            overflow: hidden;
            border-radius: 10px;
        }

        .more-show-title {
            width: 858px;
            height: 53px;
            border-bottom: 1px solid #efefef;
            background: #fff;
        }

        .more-show-title span {
            float: left;
            width: 20%;
            line-height: 53px;
            text-align: center;
            font-size: 14px;
        }

        .more-show-list {
            height: 497px;
        }

        .more-show-list li {
            height: 71px;
            border-bottom: 1px solid #efefef;
        }

        .more-show-list li:hover {
            background: #757de3;
        }

        .more-show-list .mCSB_container > li {
            background: #fff;
        }

        .more-show-list .mCSB_container > li:hover {
            background: #eee;
        }

        .more-show-list ul li {
            float: left;
            width: 20%;
            line-height: 71px;
            font-size: 14px;
            text-align: center;
            color: #4c4c4c;
        }

        .more-show-list ul li:nth-child(2),
        .more-show-list ul li:nth-child(3) {
            font-size: 12px;
        }

        .more-show-close {
            float: right;
            width: 28px;
            height: 28px;
            background: url(../../../static/images/more-show-box-close.png) no-repeat top;
            cursor: pointer;
        }

        .more-show-list ul li img {
            width: 100px;
            height: 50px;
        }

        #examples {
            position: relative;
        }

        .load-ico {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999999;
            display: none;
        }

        .slimScrollBar {
            margin-right: 3px;
        }

        .slimScrollRail {
            width: 16px !important;
            background: #e7e9eb !important;
        }
         .navbar-brand img{
        display: block;
          height: 26px;
      }
      .navbar-brand i{
          display: block;
          font-family: 黑体;
          font-size: 14px;
          letter-spacing: 17px;
          color: #fff;
      }
        .vip-ico{
            position: relative;
            top: 8px;
            left: -6px;
        }
    </style>
</head>
<body class="dashboard">


<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="mian-width">
        <div class="navbar-header">
            <a class="navbar-brand" href="/index"><img src="../../../static/images/icon.png"

                                                       style="margin-right: 5px"/>
                <i>优化师加速器</i></a>
            </a>
        </div>
        <div class="navbar-collapse collapse" id="login_ul">

            <ul class="nav navbar-nav pull-right" style="display:block;position: relative;" id="userList">
                 <li class="dropdown user-information" style="cursor:pointer;margin-top: 15px">
                    <img src="../../../static/images/head.png" style="width: 30px;height: 30px;" id="show_list"/>
                    <img class="vip-ico" src="../../../static/images/vip.png" alt="">
                    <div class="user-color" id="company_name"></div>
                </li>
                <ul style="display:none;position: absolute;padding: 0;background-color: #fff;max-height: 300px;border: 1px solid #f5f7fa;border-radius: 5px;-moz-box-shadow:2px 2px 13px #919191; -webkit-box-shadow:2px 2px 13px #919191; box-shadow:2px 2px 13px #919191;overflow-y: auto;z-index: 100;color: #606266;width: 150px;text-align: center;left:-46px;top:65px;"
                    id="buttonList">
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="user_page">
                            <img src="../../../static/images/YHXX.png"/>
                            用户信息
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="collect_page">
                            <img src="../../../static/images/sc.png"/>
                            收藏列表
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="order_page">
                            <img src="../../../static/images/order.png"/>
                            充值记录
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="out">
                            <img src="../../../static/images/TCDL.png"/>
                            退出登录
                        </a>
                    </li>
                </ul>
            </ul>

            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/purchase_page" target="_blank" class="btn-login ">
                        价格套餐
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/product_introduction" target="_blank" class="btn-login">
                        产品介绍
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/show_ad_school" target="_blank" class="btn-login ">
                        知识学院
                    </a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div class="body-warp">
    <div class="body-content">
        <div class="first-page">
            <div class="first-page-left">
                <img id="ad_img"/>
                <div class="left-img-content">
                    <div class="fw700 fs16"></div>
                    <div class="c3 fs12" id="ad_title">
                    </div>
                    <div class="index-button">
                        <div class="mt10 index-button-a">
                            <a id="ad_url">链接</a>
                        </div>
                        <div class="mt10 index-button-a ml10">
                            <a id="ad_url_download">素材下载</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="first-page-right">
                <div class="first-page-right-top">
                    <div class="left-company">
                        <div class="company-logo">
                            <img id="app_logo"/>
                        </div>

                        <div class="company-name">
                            <div class="company-name-title fs24 fw700 c4d">广东原昇信息科技有限公司</div>
                            <div class="fs14 c4d mt10 c9">
                                <span>平台广告</span>
                                {#                                <a class="examine-a">查看全部</a>#}

                            </div>
                        </div>
                        <img src="../../../static/images/x1.png" class="company-collect"/>
                    </div>

                    <div class="left-company mt320">
                        <div class="fs14 c4d mt10" id="title"></div>
                        <div class="mt320">
								<span class="heat-width">
									<img src="../../../static/images/1.png"/>
									<span class="cbe" id="hot"></span>
								</span>
                            <span class="heat-width">
									<img src="../../../static/images/2.png"/>
									<span class="cbe" id="read_count"></span>
								</span>
                            <span class="heat-width">
									<img src="../../../static/images/3.png"/>
									<span class="cbe" id="share_count"></span>
								</span>
                        </div>

                        <div class="more-show-box">
                            <div class="more-show">
                                <div class="more-show-detail">
                                    <div class="more-show-title">
                                        <span>图片</span>
                                        <span>渠道</span>
                                        <span>行业</span>
                                        <span>尺寸</span>
                                        <span>浏览次数</span>
                                    </div>

                                    <div id="examples">
                                        <img class="load-ico" src="../../../static/images/load.gif" width="45"/>
                                        <ul class="more-show-list">

                                        </ul>

                                    </div>

                                </div>
                                <div class="more-show-close">

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="clear"></div>
                <hr class="mt05 mb05"/>
                <div class="main-time fs14">
                    <div class="mt30">
                        <label class="c4d">投放时间：</label>
                        <span class="c80" id="ad_time"></span>
                    </div>
                    <div class="mt30">
                        <label class="c4d">投放类型：</label>
                        <span class="c80" id="ad_put_type"></span>
                    </div>
                    <div class="mt30">
                        <label class="c4d">所属行业：</label>
                        <span class="c80" id="ad_industry"></span>
                    </div>
                </div>
                <hr class="mt05 mb05"/>
                <div class="main-count" style="font-size: 14px;">
                    <ul class="main-count-li">
                        <li>
                            <label class="c4d">发现次数:</label>
                            <span class="c926fab" style="margin-left: 15px;color: #808080;"
                                  id="ad_discover_count"></span>
                        </li>
                        <li>
                            <label class="c4d">素材尺寸:</label>
                            <span class="c926fab" style="margin-left: 15px;color: #808080;" id="ad_share_count"></span>
                        </li>
                        <li>
                            <label class="c4d">浏览次数:</label>
                            <span class="c926fab" style="margin-left: 15px;color: #808080;" id="ad_read_count"></span>
                        </li>
                        <li>
                            <label class="c4d">相似素材:</label>
                            <span class="c926fab" style="margin-left: 15px;color: #66B3FF;cursor:pointer"
                                  id="ad_put_goal">点击查看</span>
                        </li>
                    </ul>
                </div>
                <hr class="mt05 mb05"/>
                <div class="circle-data">
                    <div class="circle">
                        <div id="circles-1" style="width: 200px;height:120px;"></div>
                    </div>
                    <div class="circle">
                        <div id="circles-2" style="width: 200px;height:120px;"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="graph-data">
            <hr class="mt2"/>
            <div class="tendency">
                <style type="text/css">
                    .advertising-title {
                        color: #3389bf;
                        margin-top: 15px;
                        font-size: 16px;
                    }

                    table.out-table, table.out-table th, table.out-table td {
                        border: 1px solid #dcdfe6;
                        text-align: center;
                        color: #606266;
                        font-weight: normal;
                    }

                    table.out-table th, table.out-table td {
                        height: 30px;
                    }

                    table.out-table {
                        width: 100%;
                        margin: 20px auto 10px;
                        border-collapse: inherit;
                        border-radius: 5px;
                    }

                    .out {
                        background: url(../../../static/images/slash.png) no-repeat;
                        background-size: auto 100%;
                        position: relative;
                    }

                    b {
                        font-style: normal;
                        display: block;
                        position: absolute;
                        top: 11px;
                        left: 0;
                        width: 35px;
                        font-size: 12px;
                        font-weight: normal;
                    }

                    em {
                        font-style: normal;
                        display: block;
                        position: absolute;
                        top: 3px;
                        left: 62px;
                        width: 55px;
                        font-size: 12px;
                    }

                    .outer-div {
                        margin: 10px auto;
                    }

                    .tiem-warp {
                        margin: 15px auto;
                    }

                    .tiem-scope {
                        color: #606266;
                        font-size: 14px;
                    }

                    .advertising-announce-tiem {
                        border: 1px solid #dcdfe6;
                        width: 220px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 5px;
                        text-align: center;
                        font-size: 14px;
                        color: #606266;
                        cursor: pointer;
                    }

                    .bg-link {
                        background: url(../../../static/images/bg_lin.png) no-repeat;
                        background-size: auto;
                    }
                </style>
                <div class="clear"></div>
                <hr style="margin: 0 auto;"/>
                <div class="clear"></div>

                <div>
                    <div class="advertising-title">广告投放日程表</div>
                    <div class="tiem-warp">
                        <div class="tiem-scope">时间范围</div>
                        <div class="outer-div">
                            <a id="date3" class="advertising-announce-tiem">
                                广告发布时间
                            </a>
                            <a class="opt_sel" id="input_trigger3">
                                <i class="i_orderd"></i>
                            </a>

                            <div>
                            </div>
                            <table class="out-table">
                                <tr>
                                    <th class="out" style="position: relative;width:110px;">
                                        <b>日期</b>
                                        <em>小时</em>
                                    </th>
                                    <th data="0">00</th>
                                    <th data="1">01</th>
                                    <th data="2">02</th>
                                    <th data="3">03</th>
                                    <th data="4">04</th>
                                    <th data="5">05</th>
                                    <th data="6">06</th>
                                    <th data="7">07</th>
                                    <th data="8">08</th>
                                    <th data="9">09</th>
                                    <th data="10">10</th>
                                    <th data="11">11</th>
                                    <th data="12">12</th>
                                    <th data="13">13</th>
                                    <th data="14">14</th>
                                    <th data="15">15</th>
                                    <th data="16">16</th>
                                    <th data="17">17</th>
                                    <th data="18">18</th>
                                    <th data="19">19</th>
                                    <th data="20">20</th>
                                    <th data="21">21</th>
                                    <th data="22">22</th>
                                    <th data="23">23</th>
                                </tr>
                                <tr>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>


                            </table>
                        </div>
                        <script type="text/javascript">

                            var dateRange1 = new pickerDateRange('date3', {
                                isTodayValid: true,
                                startDate: '请选择任意7天内的日期',
                                endDate: '',
                                needCompare: false,
                                defaultText: ' ~ ',
                                autoSubmit: true,
                                inputTrigger: 'input_trigger3',
                                theme: 'ta',
                                success: function (obj) {
                                    if (DateMinus(obj.startDate, obj.endDate) > 7) {
                                        alert("请选择7天内的日期范围")
                                        $("#date3").html("请选择任意7天内的日期")
                                        return
                                    }
                                    id = GetRequest().id
                                    createDateTable(id, obj.startDate, obj.endDate)

                                }
                            });
                        </script>
                        <style type="text/css">
                            .interest-distribution {
                                width: 100%;
                            }

                            .interest-distribution-title {
                                font-size: 22px;
                                font-weight: 700;
                                text-align: center;
                                margin: 75px auto 0;
                            }

                            .pillar-parent {
                                width: 100%;
                                overflow: hidden;
                                margin: 30px auto;
                            }

                            .pillar-img {
                                width: 49%;
                                height: 400px;
                                float: left;

                            }

                            .pillar-img-border {
                                border: 1px solid #d8d8d8;
                            }

                            .territory-data {
                                width: 49%;
                                height: 400px;
                                float: right;
                            }

                            .roundness-data {
                                width: 100%;
                                height: 400px;
                            }

                            #territoryData, #pillarImg {
                                width: 100%;
                                height: 90%;
                            }

                            .pillar-territory-title {
                                height: 10%;
                                /*text-align: center;*/
                                /*line-height: 10%*/
                            }

                            .pillar-img-height {
                                height: 500px;
                            }
                        </style>
                        <div class="interest-distribution">
                            <div class="" style="width: 1300px;margin: 30px auto 0;font-size: 12px;" id=""><a
                                    style="    font-size: 15px;display: inline-block;color: #6d95c2;"
                                    href="/purchase_page" id="show_chart"></a></div>

                            <div class="pillar-parent">

                                <div class="pillar-img">
                                    <div class="pillar-territory-title fs14">兴趣行业分布</div>
                                    <div id="pillarImg" class="pillar-img-border"></div>
                                </div>
                                <div class="territory-data">
                                    <div class="pillar-territory-title fs14">地域分类分布</div>
                                    <div id="territoryData" class="pillar-img-border"></div>
                                </div>

                            </div>
                            <div class="pillar-parent">

                                <div class="pillar-img pillar-img-height">
                                    <div class="pillar-territory-title fs14">年龄分布</div>
                                    <div class="roundness-data pillar-img-border" id="roundnessData"></div>
                                </div>
                                <div class="territory-data pillar-img-height">
                                    <div class="pillar-territory-title fs14"><!--年龄分布--></div>
                                    <div class="roundness-data pillar-img-border fs24"
                                         style="background-color: rgba(0, 0, 0, 0.3);text-align: center;line-height: 400px;color: #fff;">
                                        正在开发中......
                                    </div>
                                </div>

                            </div>

                        </div>
                        <script type="text/javascript">


                            //加载行业图表
                            function pillarImg(industry_count) {


                                option = {
                                    color: ['#3398DB'],
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: ['旅游出行', '生活服务', '文化娱乐', '科技数码', '餐饮美食', '科技数码'],
                                            axisTick: {
                                                alignWithLabel: true
                                            }
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value'
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '直接访问',
                                            type: 'bar',
                                            barWidth: '60%',
                                            data: industry_count
                                        }
                                    ]
                                };
                                var myChart = echarts.init(document.getElementById('pillarImg'));
                                //使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }

                            //加载地域图表
                            function territoryData(zone_count) {
                                zone = ['北京', '上海', '珠海', '深圳', '广州', '佛山', '东莞']
                                option = {
                                    color: ['#26ccbd'],
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: zone,
                                            axisTick: {
                                                alignWithLabel: true
                                            }
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value'
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '直接访问',
                                            type: 'bar',
                                            barWidth: '60%',
                                            data: zone_count
                                        }
                                    ]
                                };
                                var myChart = echarts.init(document.getElementById('territoryData'));
                                //使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }

                            //加载年龄图表
                            function roundnessData(age_count) {

                                var weatherIcons = {
                                    'Sunny': './data/asset/img/weather/sunny_128.png',
                                    'Cloudy': './data/asset/img/weather/cloudy_128.png',
                                    'Showers': './data/asset/img/weather/showers_128.png'
                                };

                                option = {
                                    title: {
                                        text: '',
                                        subtext: '',
                                        left: 'center'
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        // orient: 'vertical',
                                        // top: 'middle',
                                        bottom: 10,
                                        left: 'center',
                                        data: ['0-18岁', '18-23岁', '24-30岁', '31-40岁', '43-50岁', '50岁以上']
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            radius: '65%',
                                            center: ['50%', '50%'],
                                            selectedMode: 'single',
                                            data: [
                                                {
                                                    value: age_count[0],
                                                    name: '0-18岁',
                                                    label: {
                                                        normal: {
                                                            backgroundColor: '#eee',
                                                            borderColor: '#777',
                                                            borderRadius: 4,
                                                            rich: {
                                                                title: {
                                                                    color: '#eee',
                                                                    align: 'center'
                                                                },
                                                                abg: {
                                                                    backgroundColor: '#333',
                                                                    width: '100%',
                                                                    align: 'right',
                                                                    height: 25,
                                                                    borderRadius: [4, 4, 0, 0]
                                                                },
                                                                Sunny: {
                                                                    height: 30,
                                                                    align: 'left',

                                                                },
                                                                Cloudy: {
                                                                    height: 30,
                                                                    align: 'left',

                                                                },
                                                                Showers: {
                                                                    height: 30,
                                                                    align: 'left',

                                                                },
                                                                weatherHead: {
                                                                    color: '#333',
                                                                    height: 24,
                                                                    align: 'left'
                                                                },
                                                                hr: {
                                                                    borderColor: '#777',
                                                                    width: '100%',
                                                                    borderWidth: 0.5,
                                                                    height: 0
                                                                },
                                                                value: {
                                                                    width: 20,
                                                                    padding: [0, 20, 0, 30],
                                                                    align: 'left'
                                                                },
                                                                valueHead: {
                                                                    color: '#333',
                                                                    width: 20,
                                                                    padding: [0, 20, 0, 30],
                                                                    align: 'center'
                                                                },
                                                                rate: {
                                                                    width: 40,
                                                                    align: 'right',
                                                                    padding: [0, 10, 0, 0]
                                                                },
                                                                rateHead: {
                                                                    color: '#333',
                                                                    width: 40,
                                                                    align: 'center',
                                                                    padding: [0, 10, 0, 0]
                                                                }
                                                            }
                                                        }
                                                    }
                                                },
                                                {value: age_count[1], name: '18-23岁', itemStyle: {color: '#ee66f8'}},
                                                {value: age_count[2], name: '24-30岁', itemStyle: {color: '#8bffa6'}},
                                                {value: age_count[3], name: '31-40岁', itemStyle: {color: '#f4e4a5'}},
                                                {value: age_count[4], name: '43-50岁', itemStyle: {color: '#ff9fb9'}},
                                                {value: age_count[5], name: '50岁以上', itemStyle: {color: '#ab6df9'}}
                                            ],
                                            itemStyle: {
                                                color: '#77bcfa',
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };

                                var myChart = echarts.init(document.getElementById('roundnessData'));
                                //使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }
                        </script>
                        <!--<div class="fl-left w45">

                            <div class="tendency-title">趋势图</div>

                                <div class="tendency-img-left" id="tendencyImgLeft"></div>


                        </div>
                        <div class="fl-right w45">
                            <div class="tendency-title">趋势图</div>
                            <div class="tendency-img-left" id="tendencyImgRight"></div>
                        </div>-->
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
</body>
<script type="text/javascript" src="../../../static/js/base64.js"></script>
<script type="text/javascript" src="../../../static/js/top-common.js"></script>
<script type="text/javascript">
    $(function () {

        circles1();

        circles2();

//	   tendencyImgLeft();
//	   tendencyImgRight();
    })

    function circles1() {
        var option = {
            backgroundColor: "",
            color: "#36a6e5",
            title: {
                text: '',
                top: '3%',
                left: '1%',
                textStyle: {
                    color: '#333',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: 'sans-serif',
                    fontSize: 14,
                }
            },
            series: [{
                name: '来源',
                type: 'pie',
                radius: ['60%', '75%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        textStyle: {
                            fontSize: 14,
                            color: '#333'
                        },
                        formatter: '{b}\n{c}%'
                    }
                },
                data: [{
                    value: 30,
                    name: '男性',
                    label: {
                        normal: {
                            show: true
                        }
                    }
                },
                    {
                        value: 100 - 20,
                        name: ''
                    }
                ]
            }]
        };

        var myChart = echarts.init(document.getElementById('circles-1'));
        //使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function circles2() {
        var optiona = {
            backgroundColor: "",
            color: "#49dfff",
            title: {
                text: '',
                top: '3%',
                left: '1%',
                textStyle: {
                    color: '#333',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: 'sans-serif',
                    fontSize: 14,
                }
            },
            series: [{
                name: '来源',
                type: 'pie',
                radius: ['60%', '75%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        textStyle: {
                            fontSize: 14,
                            color: '#333'
                        },
                        formatter: '{b}\n{c}%'
                    }
                },
                data: [{
                    value: 70,
                    name: '女性',
                    label: {
                        normal: {
                            show: true
                        }
                    }
                },
                    {
                        value: 100 - 20,
                        name: ''
                    }
                ]
            }]
        };

        var myChart = echarts.init(document.getElementById('circles-2'));
        //使用刚指定的配置项和数据显示图表。
        myChart.setOption(optiona);
    }

    function tendencyImgLeft() {
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            color: 'rgba(124,181,236,0.75)',
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {},
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: "rgba(124,181,236,0.75)"
                        }
                    }
                }
            }]
        };
        var myChart = echarts.init(document.getElementById('tendencyImgLeft'));
        //使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function tendencyImgRight() {
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            color: 'rgba(124,181,236,0.75)',
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {},
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: "rgba(124,181,236,0.75)"
                        }
                    }
                }
            }]
        };
        var myChart = echarts.init(document.getElementById('tendencyImgRight'));
        //使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    $(function () {
        if (getCookie("tooken") != null && getCookie("tooken") != "null") {
            var token_split = getCookie("tooken").split('.')

            var payload = token_split[1]
            var str = Base64.decode(payload);
            var str1 = unescape(str.replace(/\\u/g, '%u'))
            var obj = JSON.parse(str1);
            id = obj.user_id
            $('#company_name').html(obj.company_name);

            $.ajax({
                url: '/is_collect',
                type: 'get',
                data: {
                    user_id: obj.user_id,
                    ad_id: GetRequest().id
                },
                success: function (data) {
                    if (data.json_data == 'is_collected') {
                        $('.company-collect').attr("src", "../../../static/images/x2.png")
                    }
                }
            })


        } else {
            window.location.href = '/error'
            return
        }
        id = GetRequest().id
        if (id == null) {
            window.location.href = '/error'
            return
        }


        {#title =#}
        $.ajax({
            url: '/ad_details',
            type: 'get',
            data: {
                id: id
            },
            dataType: "json",
            success: function (data) {

                $('#app_logo').attr('src', data.json_data[0].logo)
                $('.company-name-title').html(data.json_data[0].app_from)
                //$('#ad_img').attr('src', data.json_data[0].img)
                $('#ad_img').attr('src', '/images/' + data.json_data[0].app_id + '/' + data.json_data[0].local_img)

                $('#title').html(data.json_data[0].title)
                {#$('#ad_title').html(data.json_data[0].title)#}
                {#$('#ad_title').attr('data', data.json_data[0].id)#}
                $('#ad_url').attr('href', data.json_data[0].url)
                $('#ad_url').attr('target', '_blank')
                img_url_arr = data.json_data[0].img.split('/')
                //$('#ad_url_download').attr('href',data.json_data[0].img)
                $('#ad_url_download').attr('href', '/images/' + data.json_data[0].app_id + '/' + data.json_data[0].local_img)
                $('#ad_url_download').attr('download', data.json_data[0].local_img)
                var create_time = new Date(data.json_data[0].create_time)
                if (data.json_data[0].update_time == null) {
                    data.json_data[0].update_time = data.json_data[0].create_time
                }
                var update_time = new Date(data.json_data[0].update_time)
                $('#ad_time').html(create_time.Format("yyyy-MM-dd") + '~' + update_time.Format("yyyy-MM-dd"))
                $('#ad_industry').html(data.json_data[0].industry)
                $('#ad_put_type').html(data.json_data[0].put_type)
                $('#ad_discover_count').html(data.json_data[0].discover_count)
                $('#ad_share_count').html(data.img_size)
                $('#ad_read_count').html("123")
                {#$('#ad_put_goal').html(data.json_data[0].put_goal)#}
                $('#hot').html(data.json_data[0].discover_day_time)
                $('#read_count').html(data.json_data[0].read_count)
                $('#share_count').html(data.json_data[0].share_count)
            }
        })


    })


    //日期格式化方法
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    //收藏
    $(document).on("click", ".company-collect", function () {
        title = $('#ad_title').text()
        var imgUrl = '../../../static/images/x1.png';
        var newImgUrl = $(this).attr("src");
        if (imgUrl == newImgUrl) {      //收藏
            $(this).attr("src", "../../../static/images/x2.png");

            $.ajax({
                url: '/collect/',
                type: 'post',
                dataType: "json",
                data: {
                    id: GetRequest().id

                },
                success: function (data) {


                    var collected = "collected"
                    if (data.json_data != collected) {
                    }
                }

            })

        } else {        //取消收藏
            $(this).attr("src", "../../../static/images/x1.png");

            $.ajax({
                url: '/collect/',
                type: 'post',
                dataType: "json",
                data: {
                    id: GetRequest().id
                },
                success: function (data) {

                    var deleted = "deleted"
                    if (data.json_data != deleted) {
                        alert("error")
                    }
                }

            })

        }

    })


    $(document).on("click", function (e) {

        $('#buttonList').slideUp();

    })

    //页面加载
    $(function () {
        nowdate = getNowFormatDate()
        last_week = addDate(nowdate, -7)
        id = GetRequest().id
        //加载日程表
        createDateTable(id, last_week, nowdate)
        //加载行业图表

        //加载图表
        createChart()

    })

    //比较日期间隔
    function DateMinus(date1, date2) {//date1:小日期   date2:大日期
        var sdate = new Date(date1);
        var now = new Date(date2);
        var days = now.getTime() - sdate.getTime();
        var day = parseInt(days / (1000 * 60 * 60 * 24));
        return day;
    }


    //获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    //date参数是要进行加减的日期，days参数是要加减的天数
    function addDate(date, days) {
        var d = new Date(date);
        d.setDate(d.getDate() + days);
        var m = d.getMonth() + 1;
        return d.getFullYear() + '-' + m + '-' + d.getDate();
    }


    function createDateTable(id, startDate, endDate) {

        $.ajax({
            url: '/advertisement_date',
            type: 'get',
            data: {
                id: id,
                start: startDate,
                end: endDate // end日期要加一
            },
            success: function (data) {

                end = endDate
                subtrahend = 0

                //删除表格除第一行外的所有行
                $(".out-table tr").not(':eq(0)').remove()

                //先渲染表格
                for (var i = 0; i < DateMinus(startDate, endDate); i++) {
                    td_str = ""
                    for (var j = 0; j < 24; j++) {
                        td_str = td_str + '<td>-</td>'
                    }
                    subtrahend = i - DateMinus(startDate, endDate)
                    yesterday = addDate(end, subtrahend)
                    $(".out-table tbody").append('<tr><td data=' + yesterday + '>' + yesterday + '</td>' + td_str + '</tr>')
                }
                //改变有数据的格子，改为阴影
                for (var i = 0; i < DateMinus(startDate, endDate); i++) {
                    text = $(".out-table").find("tr").children("td:first-child").eq(i).text()
                    if (data.json_data != null) {


                        for (var j = 0; j < data.json_data.length; j++) {

                            if (data.json_data[j].day == text) {

                                $(".out-table").find("tr").eq(i + 1).children("td").eq(parseInt(data.json_data[j].hour) + 1).text('').attr("class", "bg-link")

                            }
                        }
                    }
                }
            }
        })
    }


    //加载地域分布和年龄分布图表
    function createChart() {
        var level = 0

        var token_split = getCookie("tooken").split('.')
        if (getCookie("tooken") != null && getCookie("tooken") != "null") {
            var payload = token_split[1]
            {#var base64 = new Base64();#}
            var str = Base64.decode(payload);
            var str1 = unescape(str.replace(/\\u/g, '%u'))
            var obj = JSON.parse(str1);
            id = obj.user_id
            $.ajax({
                url: '../check_vip',
                type: 'get',
                data: {id: id},
                async: false,
                success: function (data) {

                    data_level = parseInt(data.user_level)

                    if (data_level == 0) {

                        $('#show_chart').text('成为会员即可查看下方实时数据')

                    } else {
                        level = data_level
                    }
                }
            })
        }


        $.ajax({
            url: '/advertisement_random_data',
            type: 'get',
            success: function (data) {
                industry_data_arr = data.json_data[0].industry_random_data.split(',')
                zone_data_arr = data.json_data[0].zone_random_data.split(',')
                age_data_arr = data.json_data[0].age_random_data.split(',')
                var industry_count = []
                var zone_count = []
                var age_count = []
                if (level == 1) {
                    for (var i = 0; i < zone_data_arr.length; i++) {
                        industry_count.push(parseInt(industry_data_arr[i]))
                        zone_count.push(parseInt(zone_data_arr[i]))
                        age_count.push(parseInt(zone_data_arr[i]))
                    }
                }

                //加载行业图表
                pillarImg(industry_count)
                //加载地域图表
                territoryData(zone_count)
                //加载年龄图表
                roundnessData(age_count)
            }
        })
    }

</script>
<script>


    function append_same_ad(same_page) {
        id = GetRequest().id
        $.ajax({
            url: '/testfeature',
            type: 'get',
            data: {
                id: id,
                page: same_page,
            },

            dataType: "json",

            success: function (data) {

                if (data.json_data.length > 0 && data.json_data != "feature is null") {
                    for (var i = 0; i < data.json_data.length; i++) {
                        $(".more-show-list").append("<li>\n" +
                            "                                                <a/>\n" +
                            "                                                    <ul>\n" +
                            "                                                        <li><a href=\"" + data.json_data[i].url + " \" target=\"_blank\"><img src=\"../images/" + data.json_data[i].app_id + "/" + data.json_data[i].local_img + "\"" + "/></a>\n" +
                            "                                                        </li>\n" +
                            "                                                        <li>" + data.json_data[i].app_name + "</li>\n" +
                            "                                                        <li>" + data.json_data[i].industry + "</li>\n" +
                            "                                                        <li>" + data.json_data[i].image_size + "</li>\n" +
                            "                                                        <li>" + data.json_data[i].read_count + "</li>\n" +
                            "                                                    </ul>\n" +
                            "                                                </a>\n" +
                            "                                            </li>")
                    }
                    $(".more-show-box").fadeIn();
                    $(".load-ico").eq(0).css("display", "none");
                } else if (data.json_data == "feature is null") {
                    alert("当前素材暂无相似数据！")
                    $(".more-show-box").fadeOut();
                }
                else {
                    alert("暂无更多数据！")
                    $(".load-ico").eq(0).css("display", "none");
                }
            },


        })


    }

    $(document).ready(function () {
        $("#ad_put_goal").click(function () {

            append_same_ad(1)


            {#$(".more-show-box").fadeIn();#}
        });
        $('#ad_read_count').click(function () {
            id = GetRequest().id
            $.ajax({
                url: '/host_like',
                type: 'get',
                data: {
                    id: id
                },
                dataType: "json",
                success: function (data) {

                }
            })
        })
        $(".more-show-close").click(function () {
            $(".more-show-box").fadeOut();
        });

    });
</script>

<script>
    $(function () {
        sessionStorage.setItem("same_ad_page", 1)
        $('.more-show-list').slimScroll({
            width: '874', //可滚动区域宽度
            height: '497',
            color: '#000',
            size: "10px",
            distance: '0px',
            railColor: '#e7e9eb',
            alwaysVisible: true,
            railVisible: true,
            railWidth: '20',
            railOpacity: 1,
            wheelStep: 3,
            disableFadeOut: true
        });


//			$('.more-show-list').slimScroll().bind('slimscroll', function(e, pos) {
//				if(pos == 'bottom') {
//
//					$(".more-show-list").append('<p>后需在实例化是传入实际名称</p>');
//											alert(123);
//				}
//			});

        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0; //滚动到的当前位置
        var $frame = $(".more-show-list");
        var nDivHight = $frame.height() + 10;
        $frame.on("scroll touchmove", function () {
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if (Number(nScrollTop) + Number(nDivHight) >= Number(nScrollHight)) {
                if ($(".load-ico").eq(0).attr("style") == "display: block;") {
                    return
                }

                same_ad_page = parseInt(sessionStorage.getItem("same_ad_page"))
                same_ad_page = same_ad_page + 1

                $(".load-ico").eq(0).css("display", "block");

// 触发事件，这里可以用AJAX拉取下页的数据
                append_same_ad(same_ad_page)
                sessionStorage.setItem("same_ad_page", same_ad_page)

            }
            ;
        });

    })
</script>
</html>